<template>
	<div class="image-table">
		<el-table :data="tableData" stripe>
			<el-table-column label="ID" prop="id" align="center"></el-table-column>
			<el-table-column prop="image" label="图片" align="center">
				<template slot-scope="scope">
					<img :src="scope.row.address" alt="无图" height="40">
				</template>
			</el-table-column>
			<el-table-column label="删除" align="center">
				<template slot-scope="scope">
					<i class="el-icon-delete" @click="message(scope.row.id)"></i>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import {getProductImages,deleteProductImage} from '@/api/admin/product_image.js'
	export default{
		data() {
			return {
				tableData:[]
			}
		},
		props: {
			type: {
				type: String
			},
		},
		methods: {
			message(id){
				this.$confirm('确认删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // let data = new FormData
          // data.append('id',id)
		  let data = {
			  id:id
		  }
          deleteProductImage(data).then(res => {
            if(res.code == 200){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getTableData()
            }
          })
          
        })
      },
      getTableData(){
        let data = {
          pid:this.$route.query.productId,
          type:this.type==1 ? 'single' : 'detail'
        }
        getProductImages(data).then(res => {
          this.tableData = res.data
        })
      }
		},
    created() {
      this.getTableData()
    }
	}
</script>

<style scoped>
	.image-table{
		padding: 20px 15%;
	}
	i:hover{
		color: #409EFF;
	}
	i{
		font-size: 20px;
	}
</style>
